import axios from "axios";
import React, { useState } from "react";
import { useLocation } from "react-router-dom";
import { Button, Flex, Popup, Cell } from "react-vant";
const Index = () => {
  // 获取 price
  const location = useLocation();
  const { price } = location.state;
  const id = "131212311231231231";
  const title = "产品";
	const pay = async () => {
		const resp = await axios.post('/api/pay/zhifubao', { id, price, title })
		window.open(resp.data.data)
	}

  const [visible, setVisible] = useState(false);
  return (
    <div>
      <Flex>
        <Flex.Item>订单编号:</Flex.Item>
        <Flex.Item>{id}</Flex.Item>
      </Flex>
      <Flex>
        <Flex.Item>订单金额:</Flex.Item>
        <Flex.Item>{price}</Flex.Item>
      </Flex>
      <Flex>
        <Flex.Item>订单标题:</Flex.Item>
        <Flex.Item>{title}</Flex.Item>
      </Flex>
      <Button type="primary" block square onClick={() => setVisible(true)}>
        立即支付
      </Button>

      <Popup
        visible={visible}
        onClose={() => setVisible(false)}
        position="bottom"
      >
        <div>
          <Cell.Group>
            <Cell title="支付宝" onClick={() => pay()}/>
            <Cell title="微信" />
            <Cell title="银行卡" />
          </Cell.Group>
        </div>
      </Popup>
    </div>
  );
};

export default Index;
